<template>
  <header>
    <a-avatar
      :size="64"
      type="upload"
      class="avatar"
      :src="$api.imgUserUrl + avatar"
      v-if="avatar"
    ></a-avatar>
    <a-avatar v-else class="avatar" :size="64" icon="user"></a-avatar>
    <div class="name">
      <span>{{ company }}</span
      ><br />
      <span>{{ changeStatus() }}</span>
    </div>
    <div class="logout" @click="logout('login')">退出登录</div>
  </header>
</template>

<script>
import { Avatar } from "ant-design-vue";
export default {
  name: "index",
  components: {
    aAvatar: Avatar
  },
  data() {
    return {
      avatar: ""
    };
  },
  methods: {
    changeStatus() {
      switch (this.checkStatus) {
        case "0":
          return "未审核";
        case "1":
          return "审核中";
        case "2":
          return "审核中";
        case "3":
          return "审核不通过";
        case "4":
          return "审核不通过";
        case "5":
          return "已审核";
      }
    },
    getAvatar() {
      if (this.checkStatus === "5") {
        this.$ajax
          .post(this.$api.getAvatar)
          .then(res => {
            this.avatar = res.data.avatar;
          })
          .catch(err => {
            this.$message.error(err);
          });
      }
    },
    logout() {
      this.$commonJs.logout();
    }
  },
  created() {
    this.getAvatar();
  },
  computed: {
    checkStatus() {
      return this.$store.state.checkStatus;
    },
    company() {
      return this.$store.state.company;
    }
  }
};
</script>

<style scoped lang="less">
header {
  padding: 1.2rem;
  .linear_gradient_back(@primary-color, #ffb31c);
  color: white;
  font-size: 14px;
  .flex_content();
  .flex_align_center();
  position: relative;
  .name {
    margin-left: 10px;
    span {
      line-height: 20px;
    }
  }
  .logout {
    position: absolute;
    right: 1.3rem;
    top: 50%;
    transform: translate(0, -50%);
  }
  .avatar {
    background: #246ec3;
    webkit-box-shadow: 0 0 0 4px #e1dddd;
    -moz-box-shadow: 0 0 0 4px #e1dddd;
    box-shadow: 0 0 0 4px #e1dddd;
  }
}
</style>
